import React, { useState } from 'react';
import { NavBar, Image, Grid, Button } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate, useParams } from 'react-router-dom';
import '../styles/booking.scss'

// 时间段接口
interface TimeSlot {
  time: string;
  available: number;
  status: 'available' | 'limited' | 'unavailable';
}

// 日期接口
interface DateOption {
  day: string;
  date: string;
  available: boolean;
}

const BookingPage: React.FC = () => {
  const navigate = useNavigate();
  const { doctorId } = useParams<{ doctorId: string }>();

  // 模拟医生数据
  const doctor = {
    id: doctorId || '1',
    name: '张医生',
    title: '主任医师',
    department: '心内科',
    hospital: '协和医院',
    fee: 150
  }

  // 可选日期数据
  const [dateOptions] = useState<DateOption[]>([
    { day: '明天', date: '07-20', available: true },
    { day: '周三', date: '07-21', available: true },
    { day: '周四', date: '07-22', available: true },
    { day: '周五', date: '07-23', available: true },
    { day: '周六', date: '07-24', available: true },
  ])

  // 时间段数据
  const [timeSlots] = useState<TimeSlot[]>([
    { time: '08:00', available: 0, status: 'unavailable' },
    { time: '09:00', available: 0, status: 'unavailable' },
    { time: '10:00', available: 3, status: 'available' },
    { time: '11:00', available: 5, status: 'available' },
    { time: '14:00', available: 6, status: 'available' },
    { time: '15:00', available: 10, status: 'available' },
  ])

  // 选中的日期和时间
  const [selectedDate, setSelectedDate] = useState<string>(dateOptions[0].day)
  const [selectedTime, setSelectedTime] = useState<string>('10:00')

  const handleBack = () => {
    navigate(`/doctor/${doctorId}`)
  }

  const handleDateSelect = (day: string) => {
    setSelectedDate(day)
  }

  const handleTimeSelect = (time: string) => {
    setSelectedTime(time)
  }

  const handleContinue = () => {
    // 导航到选择就诊人页面，并传递选择的日期和时间信息
    navigate(`/booking/patient/${doctorId}?date=${selectedDate}&time=${selectedTime}`)
  }

  return (
    <div className="booking-page">
      <NavBar
        className='nav-bar'
        backArrow={
          <LeftOutline />
        }
        onBack={handleBack}
      >预约挂号</NavBar>  

      {/* 医生信息卡片 */}
      <div className="doctor-card">
        <div className="doctor-avatar">
          {/* <Image src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> */}
          <Image 
            src="https://via.placeholder.com/60"
            width={60}
            height={60}
            fit="cover"
            placeholder=""
            alt={doctor.name}
          />
        </div>
        <div className="doctor-info">
          <h3 className="doctor-title">{doctor.name} · {doctor.title}</h3>
          <div className="doctor-dept">{doctor.department}</div>
          <div className="doctor-hospital">{doctor.hospital}</div>
        </div>
      </div>

      {/* 选择就诊时间 */}
      <div className="booking-section">
        <h3 className="section-title">选择就诊时间</h3>
        <div className="date-selector">
          <Grid columns={3} gap={8}>
            {dateOptions.slice(0, 3).map((date, index) => (
              <Grid.Item key={index}>
                <div
                  className={`date-item ${selectedDate === date.day ? 'selected' : ''}`}
                  onClick={() => handleDateSelect(date.day)}
                >
                  <div className="day">{date.day}</div>
                  <div className="date">{date.date}</div>
                </div>  
              </Grid.Item>
            ))}
          </Grid>

          <div className="date-pagination">
            <span className="prev-arrow">◄</span>
            <div className="pagination-indicator"></div>
            <span className="next-arrow">►</span>
          </div>
        </div>
      </div>

      {/* 选择时段 */}
      <div className="booking-section">
        <h3 className="section-title">选择时段</h3>
        <div className="time-selector">
          <Grid columns={3} gap={8}>
            {timeSlots.map((slot, index) => (
              <Grid.Item key={index}>
                <div
                  className={`time-item ${slot.status} ${selectedTime === slot.time ? 'selected' : ''}`}
                  onClick={() => slot.status !== 'unavailable' && handleTimeSelect(slot.time)}
                >
                  <div className="time">{slot.time}</div>
                  <div className="availability">
                    {slot.status === 'unavailable' ? '已约满' : `剩余 ${slot.available}个`}
                  </div>
                </div>  
              </Grid.Item>
            ))}
          </Grid>
        </div>
      </div>

      {/* 底部操作栏 */}
      <div className="booking-footer">
        <div className="fee-info">
          <span className="fee-label">¥ {doctor.fee}</span>
        </div>
        <Button className='confirm-button' color="primary" onClick={handleContinue}>
          确认预约
        </Button>
      </div>
    </div>
  )
}

export default BookingPage;